<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
	
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/css/bootstrap.min.css">
	<link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
	<link rel="stylesheet" href="css/bootstrap-image-gallery.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
        <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
	<style>
	 .header h1{
		background-image:url(http://www.google.com.hk/images/srpr/logo4w.png);
		width:280px;
		height:30px;
	 }
	 .navbar-pink{
		background-color: #C36;
		border: 0;
		border-radius: 0;
		color:#fff;
		-webkit-box-shadow: rgba(114, 110, 110, 0.5) 1px 5px 5px;
		-moz-box-shadow: rgba(114, 110, 110, 0.5) 1px 5px 5px;
		box-shadow: rgba(114, 110, 110, 0.5) 1px 5px 5px;
	 }
	 .navbar-nav li a{
	   color:#fff;
	   font-size:16px;
	 }
	 .navbar-nav li a:hover{
		background-color: #a30052;
	 }
	 #footer {
		background-color: #B30558;
		border-top: 1px solid #1c9971;
		color: #a5d8c7;
		text-shadow: 0 1px 0 rgba(0,0,0,0.15);
		margin-top:50px;
	 }
	 #footer-inner {
		max-width: 940px;
		margin: 0 auto;
		padding-bottom: 20px;
		overflow: hidden;
		position: relative;
	 }
	
	.nav-foot p.footer-links {
	  margin-bottom: 15px;
	}
	.frendlinks ul {
		list-style: none;
		overflow: hidden;
		margin: 0;
		background: rgba(37, 20, 20, 0.35);
		text-align: justify;
	}
	.frendlinks ul li {
		float: left;
		margin-right: 10px;
		height: 25px;
		line-height: 25px;
		overflow: hidden;
	}
	footer a,.frendlinks ul li a{
	    color:#FFFAFA;
	}
	
	.pricing-row .item{
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		background-color: #39b3d7;
		padding:5px;
		margin:auto 5px;
		border:2px;
		border-color:#269abc;
		color:#fff;
	}
	.pricing-row .item:hover{
		border:2px;
		border-color:#B30558;
	}
	.item h2,.item p:last-child{
		text-align:center;
	}
    .price {
		font-size: 30px;
		font-weight: bold;
		text-transform: uppercase;
		vertical-align: middle;
		display: table-cell;
		text-align:center;
	}
    .price-body {
		width: 125px;
		height: 125px;
		margin: 0 auto 15px auto;
		border: 2px solid #fff;
		border-radius: 100%;
		display: table;
	}
	.price-figure{
		color:#269abc;
	}
	.color-teal {
		color: #00A0B1;
	}
	.bg-white{
		background: #FFFFFF;
	}
	.icon-bar{
		background: #fff;
	}
	</style>
  </head>
  <body>
	<div class="header">
	  <div class="container">
		<h1>白雪公主影楼</h1>
	  </div>
	</div>
    <div class="navbar navbar-pink" role="navigation"><!---add class "navbar-fixed-top"---->
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">白雪公主影楼</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">网站首页</a></li>
            <li><a href="case.html">作品展示</a></li>
			<li><a href="theme.html">主题风格</a></li>
            <li><a href="pricing.html">套系报价</a></li>
			<li><a href="about.html">关于我们</a></li>
			<li><a href="about.html#contacter">联系我们</a></li> 
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
    
    <!-- 报价 ================================================== -->
	<div class="container pricing">
      <!-- Three columns of text below the carousel -->
      <div class="row pricing-row">
        <div class="col-md-3">
			<div class="item">
			  <img class="img-rounded"  alt="140x140" style="width: 100%; height: 100%;" src="images/s3.jpg">
			  <h2>Heading</h2>
			  <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
			  <p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
			</div>
        </div><!-- /.col-md-3 -->
        <div class="col-md-3">
			<div class="item">
			  <img class=""  alt="140x140" style="width: 100%; height: 100%;" src="images/s3.jpg">
			  <h3>人文艺术光效片场</h3>
			  <p>
			    <ul>
				  <li>特级资深中方主任级摄影师/专业人像灯光师一对一全程明星拍摄。</li>
				  <li>特级资深中方主任级化妆师全程服务；资深礼服设计师拍摄礼服挑选设计服务。</li>
				  <li>全程采用专业影视专用化妆品；全程提供拍摄专业道具。</li>
				</ul>
              </p>
			  <div class="price-body bg-white color-red">
				 <div class="price">
					<span class="price-figure">￥6649</span>
				 </div>
			  </div>
			  <p><a class="btn btn-primary" href="pricing_detail.html" role="button">了解详情</a></p>
			</div>
        </div><!-- /.col-md-3 -->
	    <div class="col-md-3">
			<div class="item">
			  <img class=""  alt="140x140" style="width: 100%; height: 100%;" src="images/s3.jpg">
			  <h2>Heading</h2>
			  <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
			  <p><a class="btn btn-success" href="#" role="button">View details »</a></p>
			</div>
        </div><!-- /.col-md-3 -->
     	<div class="col-md-3">
			<div class="item">
			  <img class=""  alt="140x140" style="width: 100%; height: 100%;" src="images/s3.jpg">
			  <h2>Heading</h2>
			  <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
			  <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
			</div>
        </div><!-- /.col-md-3 -->
      </div><!-- /.row -->
	  


    </div> 

	<footer id="footer" class="footer hidden-print">
		<div id="footer-inner">
			<div class="partners">
				<a href="http://www.net.cn" target="_blank" class="wanwang" rel="nofollow"></a>
				<a href="http://vdisk.weibo.com/" class="weipan" target="_blank" rel="nofollow"></a>
				<a href="http://weibo.com/uidesign" target="_blank" class="weibo" rel="nofollow"></a>
				<a href="http://t.qq.com/youshege" target="_blank" class="tweibo" rel="nofollow"></a>
				<a href="http://qiniutek.com/" target="_blank" class="qiniu" rel="nofollow"></a>
				<p style="clear:both;">特别鸣谢 <a href="http://www.net.cn" target="_blank" rel="nofollow">万网</a> 赞助主机，<a href="http://www.qiniutek.com" target="_blank">七牛</a> 赞助图片加速</p>
			</div>
			<div class="nav-foot">
			<p class="footer-links"><a href="http://uisdc.com/ad/" rel="nofollow">广告合作</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://uisdc.com/duty/" rel="nofollow">免责声明</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://uisdc.com/friendlink/" rel="nofollow">友情链接</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://uisdc.com/contact/" rel="nofollow">联系我们</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://uisdc.com/about/" rel="nofollow">关于我们</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://e.weibo.com/uidesign/" rel="nofollow">@优秀网页设计</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;优设官方 QQ 群：<select style="display:inline;color:#000">
				<option class="fcg">181671383</option>
				<option class="fcr">87096978</option>
				<option class="fcr">192586823</option>
				<option class="fcr">158514561</option>
				<option class="fcr">216862992</option>
				<option class="fcr">124169968</option>
				<option class="fcr">96096993</option>
				<option class="fcr">199178798</option>
				<option class="fcr">79321884</option>
				<option class="fcr">244419297</option>
				<option class="fcr">193642837</option>
				<option class="fcr">179124119</option>
				<option class="fcr">172111170</option>
				<option class="fcr">277704164</option></select></p>
				<p class="credit">Copyright © 2013<strong> <a class="site-link" href="http://www.uisdc.com" title="优设-UISDC" rel="home"><span>优设-UISDC</span></a></strong> - 优秀网页设计联盟 Powered by <a class="wp-link" href="http://wordpress.org" title="State-of-the-art semantic personal publishing platform"><span>WordPress</span></a> and <a href="http://www.net.cn" rel="nofollow">中国万网</a> - <a target="_blank" href="http://www.miibeian.gov.cn">粤ICP备12017804号-1 </a></p>						<div style="display:none">
											<a href="http://tongji.baidu.com/hm-web/welcome/ico?s=7aeefdb15fe9aede961eee611c7e48a5" target="_blank">网站统计</a>
										</div>
									</div>
		<div class="frendlinks"><h6>友情链接</h6>
			<ul class="frendlink-ul">
				
				<li><a href="http://www.hao123.com/" title="hao123上网导航" target="_blank">hao123上网导航</a></li>
				<li><a href="http://hao.uisdc.com/" title="设计师网址导航为优秀网页设计联盟（SDC）旗下最实用、最专业、最全面、最好用的设计师导航！" target="_blank">设计师网址导航</a></li>
				<li><a href="http://cdc.tencent.com/" rel="nofollow" title="腾讯用户研究与体验设计中心" target="_blank">腾讯CDC</a></li>
				<li><a href="http://ueo.baidu.com/" title="百度联盟事业部用户体验团队官方博客" target="_blank">百度联盟UEO</a></li>
				<li><a href="http://uxc.360.cn/" title="360用户体验设计中心" target="_blank">360用户体验设计</a></li>
				<li><a href="http://ued.taobao.com/" title="淘宝UED" target="_blank">淘宝UED</a></li>
				<li><a href="http://udc.weibo.com/" title="新浪微博设计团队" target="_blank">新浪微博设计团队</a></li>
				<li><a href="http://vc.changyou.com" rel="nofollow" title="搜狐畅游VC" target="_blank">搜狐畅游VC</a></li>
				<li><a href="http://www.hubei.com/" title="武汉生活第一门户，湖北网(hubei.com)是一个专门为武汉1000万武汉人提供武汉本地生活、消费信息、购物指导和情感交流的网上生活家园" target="_blank">湖北网</a></li>
				<li><a href="http://hao.qq.com/" title="QQ导航–腾讯旗下的网址导航，收录休闲生活相关的优秀网站，为您提供最便捷最安全的网址大全服务" target="_blank">QQ网址导航</a></li>
				<li><a href="http://hao.360.cn/" title="360安全网址导航" target="_blank">360安全网址导航</a></li>
				<li><a href="http://www.iconfans.org/" title="iconfans" target="_blank">iconfans</a></li>
				<li><a href="http://nav80.com/" title="Nav80设计师网址导航" target="_blank">Nav80网址导航</a></li>
				<li><a href="http://ux.etao.com/" title="一淘UX用户体验中心" target="_blank">一淘UX</a></li>
				<li><a href="http://ecd.tencent.com/" rel="nofollow" title="腾讯电商ecd" target="_blank">腾讯电商ecd</a></li>
				<li><a href="http://isux.tencent.com/" title="腾讯社交用户体验设计" target="_blank">腾讯ISUX</a></li>
				<li><a href="http://www.gn00.com/" target="_blank">技术宅社区</a></li>
				<li><a href="http://www.shejidaren.com/" title="谈谈网页设计、用户体验，聊聊前端开发，分享高质量设计资源和灵感，爱设计，爱分享" target="_blank">设计达人</a></li>
				<li><a href="http://shop62443992.taobao.com/" rel="nofollow" title="瓷言瓷语" target="_blank">设计师的陶瓷铺子</a></li>
				<li><a href="http://www.itnews001.com/" title="专业的IT科技、数码、电脑、软件硬件、手机、游戏、苹果、iphone、ipad、安卓、互联网、创意概念、设计资讯报道" target="_blank">IT资讯网</a></li>
				<li><a href="http://tgideas.qq.com/" title="腾讯游戏的专业设计团队" target="_blank">腾讯TGideas</a></li>
				<li><a href="http://pcedu.pconline.com.cn/sj/" target="_blank">PConline创意设计</a></li>
				</ul>
			</div>
		</div>
	</footer>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
	<script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
	<script src="js/bootstrap-image-gallery.js"></script>
	<script src="js/demo.js"></script>
  </body>
</html>